<template>
    <div>
        <div class="head">
            <div class="iconfont icon-zuojiantou myicon" @click.stop="back"></div>
            <div class="title">详细资料</div>
        </div>

        <div class="headImg_and_name">
            <div class="headImg_and_name_inner">
                <img src="http://admin.xukunqi.com/public/static/headimage.png" height="75" width="75" class="head_img">
                <div class="name_and_username">
                    <div class="name">
                        {{friendAttr.name}}
                    </div>
                    <div class="username">
                        {{friendAttr.username}}
                    </div>
                </div>
            </div>
        </div>

        <div class="appendMessage">
            个性签名：{{friendAttr.styleMessage}}
        </div>

        <div class="to_chat" @click.stop="to_chat">
            发消息
        </div>

        <div class="del_friend" @click.stop="del_friend">
            删除好友
        </div>

    </div>
</template>

<script>
    import {delete_Friend,select_Friend,select_user,delete_message_left} from "../../request/api";
    import Cookies from 'js-cookie';
    export default {
        name: "friend_detail",
        data(){
            return{
                friendAttr:{},
            }
        },
        mounted(){
            //重新查询好友列表
            select_user(null).then(res=>{
                this.$store.commit("setUserList",res.data);

                this.id=this.$route.query.id;
                for(let i=0;i<this.$store.state.userList.length;i++){
                    if(this.$route.query.id === this.$store.state.userList[i].username){
                        console.log("之前",this.$store.state.userList[i]);
                        this.friendAttr=this.$store.state.userList[i];
                    }
                }

            })


        },
        methods:{
            back(){
                this.$router.back();
            },
            to_chat(){
                this.$router.push({path:"/center/chat",query:{id:this.friendAttr.username}});
            },
            del_friend(){
                console.log("开始删除")
                let data={
                    "fromid":Cookies.get('username'),
                    "toid":this.friendAttr.username,
                }
                delete_Friend(data).then(res=>{
                    if(res.data.type === "success"){
                        console.log("你删除成功了");


                        // 重新查询好友列表  重新渲染好友列表
                        let myid={
                            "fromid":this.$store.state.myselfAttribute.username,
                        }
                        select_Friend(myid).then(res=>{
                            console.log("删除后的数据",res)
                            console.log("你要更新列表了哟");
                            this.$store.commit("setFriendList",res.data);
                        })



                        //通知对方更新好友列表
                        let message={
                            "type":"reload_friendList",
                            "notify_to":this.friendAttr.username,
                        }
                        this.$store.state.websocket.send(JSON.stringify(message));

                        console.log("删除结束")


                        //删除双方的messageLift列表
                        let delete_message_left_data={
                            "fromid":Cookies.get('username'),
                            "toid":this.$route.query.id,
                        }




                        delete_message_left(delete_message_left_data).then(res=>{
                             console.log("删除好友成功之后的消列表",res.data);
                             if(res.data.length === 0){
                                 this.$store.commit("setMessageList",null);
                             }else{
                                 this.$store.commit("setMessageList",res.data);
                             }

                             //通知对方 重新查询messageLeft列表
                             let notify_delete_message_left={
                                 "type":"reload_message_list",
                                 "toid":this.$route.query.id
                             }
                             console.log("toid",this.$route.query.id);
                             this.$store.state.websocket.send(JSON.stringify(notify_delete_message_left));
                             console.log("reload_message_list 发送了");
                        })


                        this.$router.push('/center/friend');
                    }
                })
            },
        }
    }
</script>

<style scoped>

    .head{height: 50px;width: 100%;display: flex;flex-direction: row;}
    .myicon{font-size: 21px;position: fixed;top: 16px;left: 21px;}
    .title{font-size: 18px;line-height: 50px;text-align: center;flex-grow: 1;}

    .headImg_and_name{width: 100%;}
    .headImg_and_name_inner{width: calc(100% - 40px); margin: 0 auto;display: flex;flex-direction: row;background-color: #f8f8f8;border-radius: 15px;}
    .head_img{border-radius: 5px;margin-left: 5px;}
    .name_and_username{margin-left: 7px;}
    .name{font-size: 18px;line-height: 18px;margin-top: 20px;}
    .username{font-size: 12px;line-height: 12px;margin-top: 9px;}

    .appendMessage{height: 48px;width: calc(100% - 40px); margin: 0 auto;background-color: #f8f8f8;margin-top: 18px;font-size: 17px;line-height: 48px;}

    .to_chat{height: 45px;width: calc(100% - 40px); margin: 17px auto;background-color: #1aad19;color: white;outline: none;border-radius: 5px;font-size: 17px;line-height: 45px;text-align: center;}
    .del_friend{height: 45px;width: calc(100% - 40px); margin: 17px auto;background-color: red;color: white;outline: none;border-radius: 5px;font-size: 17px;line-height: 45px;text-align: center;}
</style>